<template>
  <div class="type" ref="type">
    <common
      :data="types"
      ref="common"
      :ProductLoading="ProductLoading"
      :title="type"
      :totalPages="totalPages"
      @changedSort="getSortCondition"
      @changePrice="getSortPrice"
      @changePage="changePages"
      @select="selectType"
      @selectCategory="selectCategory"
      @selectSecondCategory="selectSecondCategory"
      @selectThreeCategory="selectThreeCategory"
    >
    </common>
  </div>
</template>
<script>
  import {ERR_OK} from 'api/config'
  import {mapMutations,mapGetters} from 'vuex'
  import {Categories} from 'api/type'
  import {getCategory} from 'common/js/dom'
  import common from "components/common/common";
  import {classification} from 'api/categories'
  export default {
    computed: {
      ...mapGetters([
        'categories'
      ])
    },
    data() {
      return {
        types: [],
        PageNumber: 1,
        categoryId:'',
        categoryIds:[],
        type:'All Category',
        val:'ShelfTimeNewToOld',
        price: {
          min: 1,
          max: 999
        },
        totalPages:0,
        ProductLoading:false,
        name:'',
        TreeShapeCategories: [],
        OneCategories: [], //一级选中分类数据
        SecondCategory: [] //二级选中分类数据
      }
    },
    created() {
      this.setFocus(-1)
      this.setCategoryName('')
      this._classification()
      const _this = this
      let t1 = setInterval(() => {
        _this.TreeShapeCategories = JSON.parse(window.localStorage.getItem("TreeShapeCategories"))
        if (_this.TreeShapeCategories !== null) {
          clearInterval(t1)
        }
      }, 100)
    },
    methods: {
      _classification() {
        classification().then(() => {
          this._Categories()
        })
      },
      selectType(item) {
        this.$router.push({
          path: `/category/${item.urlKeyWords}/${item.sku}`
        })
        this.setDisc(item)
      },
      selectCategory(item) {
        let nameAry = item.name.replace(/,/g,'').replace(/ & /g,' ').split(' ');
        let name = nameAry.join('-')
        this.$router.push({
          path: `/categories/${name}`
        })
        this.setFocus(1)
      },
      selectSecondCategory(itemSecond) {
        for (let i =0 ;i<this.TreeShapeCategories.length; i++) {
          this.OneCategories = []
          if( this.TreeShapeCategories[i].categoryId === itemSecond.parentId) {
            this.OneCategories.push(this.TreeShapeCategories[i])
            break
          }
        }
        let nameAry1 = this.OneCategories[0].name.replace(/,/g,'').replace(/ & /g,' ').split(' ');
        let name = nameAry1.join('-')
        let nameAry2 = itemSecond.name.replace(/,/g,'').replace(/ & /g,' ').split(' ');
        let SecondName = nameAry2.join('-')
        this.$router.push({
          path: `/categories/${name}/${SecondName}`
        })
        this.setFocus(2)
      },
      selectThreeCategory(itemSecond,itemThree) {
        for (let i =0 ;i < this.TreeShapeCategories.length; i++) {
          if(itemSecond !== undefined) {
            if (this.TreeShapeCategories[i].categoryId === itemSecond.parentId) {
              this.OneCategories.push(this.TreeShapeCategories[i])
              break
            }
          }
        }
        let nameAry1 = this.OneCategories[0].name.replace(/,/g,'').replace(/ & /g,' ').split(' ');
        let name = nameAry1.join('-')
        let nameAry2 = itemSecond.name.replace(/,/g,'').replace(/ & /g,' ').split(' ');
        let SecondName = nameAry2.join('-')
        let nameAry = itemThree.name.replace(/,/g,'').replace(/ & /g,' ').split(' ');
        let ThreeName = nameAry.join('-')
        this.$router.push({
          path: `/categories/${name}/${SecondName}/${ThreeName}`
        })
        this.setFocus(3)
      },
      getSortCondition(val) {
        this.val = val
      },
      getSortPrice(min, max) {
        this.price.min = min
        this.price.max = max
      },
      changePages(num) {

        this.ProductLoading = true
        Categories(num,this.val,this.price.min, this.price.max,this.categories.categoryId).then((res) => {
          this.types = []
          this.types = res.data
          this.totalPages = res.totalPages
          this.ProductLoading = false
        })
      },
      _Categories() {
        //保持页面不刷新
        const path = this.$router.currentRoute.fullPath.split('/')
        let categoryId = ''
        let changeurlId;
        this.TreeShapeCategories.forEach((item) => {
          let nameAry =item.name.replace(/,/g,'').replace(/ & /g,' ').split(' ');
          let name = nameAry.join('-')
          if (name === path[2]) {
            changeurlId = item.categoryId
          }
        })
        if (!this.categories.categoryId) {
          if (path[2]) {
            categoryId = changeurlId
          }
        } else {
          categoryId = this.categories.categoryId
        }
        this.ProductLoading = true
        if(this.$route.query.page) {
          this.PageNumber = this.$route.query.page
        }else {
          this.PageNumber = 1
        }
        if(categoryId){
          Categories(this.PageNumber,this.val,this.price.min, this.price.max,categoryId).then((res) => {
            this.types = res.data
            this.totalPages = res.totalPages
            this.ProductLoading = false
          })
        }else {
          Categories(this.PageNumber,this.val,this.price.min, this.price.max,this.categories.categoryId).then((res) => {
            this.types = res.data
            this.totalPages = res.totalPages
            this.ProductLoading = false
          })
        }
      },
      ...mapMutations({
        setDisc: 'SET_FEATURED_LIST',
        setClass: 'SET_CATEGORIES',
        setFocus: 'SET_CATEGORY_FOCUS',
        setALllCategories: 'SET_ALL_CATEGORIES',
        setCategoryName: 'SET_CATEGORY_NAME'
      })
    },
    watch:{
      val(newVal) {
        this._Categories()
      },
      price: {
        handler(newVal, oldVal) {
          this._Categories()
        },
        deep: true
      },
      categories(){
        this._Categories()
      }
    },
    components: {
      common
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .type
    background #fff
    margin auto
</style>
